<template>
	<view class="location">
		<view class="location-header">
			<u-search :show-action="true" :action-text="$t('home.btn_cancel')" v-model="keyword" :placeholder="$t('home.input_city')" height="64" shape="square" @search="search" :focus="true"></u-search>
		</view>
		<view class="location-content">
			<view class="location-content_title" v-if="count > 0">{{$t('home.search_result')}}（<text class="location-content_title--text">{{count}}</text>）</view>
			<view class="location-content_list" v-for="(item, index) in city">
        <view class="location-content_item u-flex u-border-bottom" @click="goWeather(item.FullName)">{{item.FullName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import pageMixin from '@/utils/pageMixin';
export default {
  mixins: [pageMixin],
		data() {
			return {
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: this.$t('home.pull_up'),  
					loading: this.$t('home.loading'),
					nomore: this.$t('home.note_no_more'),
				},
        city: [],
        count: 0
			}
		},

		onLoad() {
			uni.setNavigationBarTitle({
				 title:this.$t('home.select_city')
			 })
		},
		onShow() {
      //this.$store.commit('checkUserLogin');
		},
		components: {
		},
		computed:{
			i18n () {  
				return this.$t('home')  
			}
		},
		methods: {
      search (keyworld) {
        //查询城市接口
        this.$http.get('/weather/weather/location/list', {city: keyworld}).then(res => {
          this.city = res.data;
          this.count = res.count;
        })
      },
      goWeather(cityName) {
        this.$u.route('/pages/location/weather/index', {
          city: cityName,
        });
      },
      backHome(cityName) {
        //uni.setStorageSync ( "cityName" , cityName ) ;//赋值
       this.$http.get('/weather/weather/api/data', {city: cityName}).then(res => {
          if (res){
            this.$u.route({
              type: 'reLaunch',
              url: 'pages/home/index'
            })
          }
        })
      },
		}
	}
</script>

<style lang="scss" scoped>
	.location {
	}
	.location-header {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	.location-content {
		background-color: #fff;
		&_title {
			padding: 20rpx 28rpx;
			color: #15171A;
			font-weight: bold;
			&--text {
				color: #0089FF;
			}
		}
		&_list {
			padding: 0 28rpx;
		}
		&_item {
			height: 100rpx;
		}
	}
</style>
